<template>
  <template v-for="item in items" :key="item.id">
    <!-- 如果有子菜单，显示为sub-menu -->
    <el-sub-menu v-if="item.child_category_list?.length" :index="String(item.id)">
      <template #title>{{ item.slug }}</template>
      <!-- 递归调用自身渲染子菜单 -->
      <MenuTree :items="item.child_category_list" />
    </el-sub-menu>
    <!-- 没有子菜单，直接显示为menu-item -->
    <el-menu-item v-else :index="String(item.id)" @click="tabStore.setCategory(item.id)">
      {{ item.slug }}
    </el-menu-item>
  </template>
</template>

<script setup>
import { useTabStore } from '@/stores/tab'
import { onUpdated } from 'vue'

const tabStore = useTabStore()
// 定义props接收菜单数据
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

// 添加updated钩子，确保组件更新后强制重绘
onUpdated(() => {
  // 强制重绘
  const menuElement = document.querySelector('.el-menu')
  if (menuElement) {
    menuElement.style.display = 'none'
    menuElement.offsetHeight // 触发重排
    menuElement.style.display = 'flex'
  }
})

</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>